<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{padding:10px;margin:10px;border:solid 1px black;}

        .red{background:red}
        .green{border: solid 10px green;}
    </style>
</head>
<body>
    <div class="app">
        <h1>这是 - {{title}}</h1>
        <p>父组件的数据为：{{msg}}</p>

        <Child1></Child1>
        <Child2></Child2>
    </div>
</body>
<template id="child1Temp">
    <div>
        <h3>这是 - {{title}}</h3>
        <p>子组件的数据为：{{msg}}</p>
        <grand-son></grand-son>
        <p>获取到一个祖先注入的依赖：{{abc}}</p>
        <p>获取到一个祖先注入的依赖：{{asd}}</p>
    </div>
</template>
<template id="child2Temp">
    <div>
        <h3>这是 - {{title}}</h3>
        <p>子组件的数据为：{{msg}}</p>
        <p>获取到一个祖先注入的依赖：{{abc}}</p>
        <p>获取到一个祖先注入的依赖：{{asd}}</p>
    </div>
</template>
<template id="grandSon">
    <div>
        <h3>这是 - {{title}}</h3>
        <p>孙子组件的数据为：{{msg}}</p>
        <p>获取到一个祖先注入的依赖：{{abc}}</p>
        <p>获取到一个祖先注入的依赖：{{asd}}</p>
    </div>
</template>
<script src="../vue.global.js"></script>
<script>
    const app = Vue.createApp({
        data(){
            return {
                title: "根组件",
                msg:"根组件的数据"
            }
        },
        provide(){
            return {
                abc: "hello world",
                asd: this.msg
            }
        },
        components:{
            Child1: {
                data(){
                    return {
                        title:"子组件1",
                        msg: "子组件1的数据"
                    }
                },
                inject:["abc", "asd"],
                template: "#child1Temp",
                components:{
                    grandSon:{
                        data(){
                            return {
                                title:"孙子组件1",
                                msg: "孙子组件1的数据"
                            }
                        },
                        template: "#grandSon",
                        inject:["abc", "asd"]
                    }
                }
            },
            Child2: {
                data(){
                    return {
                        title:"子组件2",
                        msg: "子组件2的数据"
                    }
                },
                template: "#child2Temp",
                inject:["abc", "asd"]
            }
        }
    })

    app.mount(".app");

</script>
</html>